<template>
  <div class="donation-container">
    <headd />
    <div class="donation-content">
      <!-- 顶部横幅 -->
      <div class="us-box">
        <div class="joinleft">
          <h1 class="animate-fade-in-up">爱心捐助</h1>
          <p class="animate-fade-in-up animation-delay-300">您的每一份爱心都将帮助更多需要帮助的小动物找到温暖的家</p>
        </div>
      </div>

      <!-- 捐款进度展示 -->
      <div class="container mx-auto px-4 py-12">
        <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-lg p-8 mb-12 transform hover:scale-[1.02] transition-all duration-300 border border-orange-200">
          <div class="flex flex-col md:flex-row items-center justify-between mb-6">
            <div>
              <h3 class="text-2xl font-bold text-orange-800">本月募捐目标</h3>
              <p class="text-orange-600">帮助100只流浪动物</p>
            </div>
            <div class="text-right">
              <p class="text-3xl font-bold text-orange-700">¥{{ currentAmount.toLocaleString() }}</p>
              <p class="text-orange-600">目标 ¥{{ targetAmount.toLocaleString() }}</p>
            </div>
          </div>
          <div class="relative h-4 bg-orange-100 rounded-full overflow-hidden">
            <div 
              class="absolute left-0 top-0 h-full bg-gradient-to-r from-orange-500 to-orange-700 transition-all duration-1000"
              :style="{ width: `${(currentAmount / targetAmount) * 100}%` }"
            ></div>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
          <!-- 捐款表单 -->
          <div class="bg-white rounded-2xl shadow-lg p-8 transform hover:shadow-xl transition-all duration-300 border border-orange-200">
            <h2 class="text-2xl font-bold text-orange-800 mb-8">填写捐赠信息</h2>
            <form @submit.prevent="submitDonation" class="space-y-6">
              <!-- 姓名输入 -->
              <div class="form-group">
                <label for="name" class="block text-sm font-medium text-orange-700 mb-2">
                  姓名
                  <span class="text-red-500">*</span>
                </label>
                <div class="relative group">
                  <input 
                    type="text" 
                    id="name" 
                    v-model="name" 
                    required
                    class="w-full px-4 py-3 rounded-lg border border-orange-300 focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300 bg-orange-50"
                    :class="{'border-red-500': formErrors.name}"
                    placeholder="请输入您的姓名"
                  />
                  <span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-orange-400 group-hover:text-orange-600 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                  </span>
                </div>
                <p v-if="formErrors.name" class="mt-1 text-sm text-red-500">{{ formErrors.name }}</p>
              </div>

              <!-- 手机号输入 -->
              <div class="form-group">
                <label for="phone" class="block text-sm font-medium text-orange-700 mb-2">
                  手机号
                  <span class="text-red-500">*</span>
                </label>
                <div class="relative group">
                  <input 
                    type="tel" 
                    id="phone" 
                    v-model="phone" 
                    required
                    pattern="[0-9]{11}"
                    class="w-full px-4 py-3 rounded-lg border border-orange-300 focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300 bg-orange-50"
                    :class="{'border-red-500': formErrors.phone}"
                    placeholder="请输入您的手机号"
                  />
                  <span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-orange-400 group-hover:text-orange-600 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                    </svg>
                  </span>
                </div>
                <p v-if="formErrors.phone" class="mt-1 text-sm text-red-500">{{ formErrors.phone }}</p>
              </div>

              <!-- 捐款金额选择 -->
              <div class="form-group">
                <label class="block text-sm font-medium text-orange-700 mb-3">选择捐款金额</label>
                <div class="grid grid-cols-3 gap-4">
                  <button 
                    v-for="amount in donationAmounts" 
                    :key="amount"
                    type="button"
                    @click="selectAmount(amount)"
                    class="relative px-4 py-3 rounded-lg border-2 transition-all duration-300 text-center overflow-hidden group"
                    :class="selectedAmount === amount ? 
                      'border-orange-600 bg-orange-600 text-white' : 
                      'border-orange-200 hover:border-orange-600 text-orange-600 hover:text-orange-700'"
                  >
                    <span class="relative z-10">¥{{ amount }}</span>
                    <div 
                      class="absolute inset-0 bg-gradient-to-r from-orange-600 to-orange-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                      :class="{ 'opacity-100': selectedAmount === amount }"
                    ></div>
                  </button>
                </div>
                <div class="mt-4">
                  <div class="relative">
                    <input 
                      type="number" 
                      v-model="customAmount"
                      placeholder="其他金额"
                      class="w-full px-4 py-3 rounded-lg border border-orange-300 focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300 bg-orange-50"
                      :class="{'border-red-500': formErrors.amount}"
                      min="1"
                      @input="onCustomAmountInput"
                    />
                    <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-orange-400">¥</span>
                  </div>
                  <p v-if="formErrors.amount" class="mt-1 text-sm text-red-500">{{ formErrors.amount }}</p>
                </div>
              </div>

              <!-- 留言 -->
              <div class="form-group">
                <label for="message" class="block text-sm font-medium text-orange-700 mb-2">
                  爱心留言
                  <span class="text-orange-500 text-xs">(选填)</span>
                </label>
                <textarea 
                  id="message" 
                  v-model="message"
                  rows="3"
                  class="w-full px-4 py-3 rounded-lg border border-orange-300 focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300 bg-orange-50"
                  placeholder="写下您的爱心寄语..."
                ></textarea>
              </div>

              <!-- 提交按钮 -->
              <button 
                type="submit"
                class="w-full bg-gradient-to-r from-orange-600 to-orange-700 text-white px-6 py-3 rounded-full transition-all duration-300 transform hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50 disabled:opacity-50"
                :disabled="isSubmitting"
              >
                <span v-if="isSubmitting" class="flex items-center justify-center">
                  <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                  处理中...
                </span>
                <span v-else>确认捐款</span>
              </button>
            </form>
          </div>

          <!-- 右侧信息区域 -->
          <div class="space-y-8">
            <!-- 二维码卡片 -->
            <div class="bg-white rounded-2xl shadow-lg p-8 text-center transform hover:shadow-xl transition-all duration-300 border border-orange-200">
              <h2 class="text-2xl font-bold text-orange-800 mb-6">扫码捐款</h2>
              <div class="relative inline-block group">
                <img 
                  src="../assets/images/money.jpg" 
                  alt="收款二维码" 
                  class="w-64 h-64 rounded-lg shadow-md transition-transform duration-300 group-hover:scale-105"
                />
                <div class="absolute inset-0 bg-gradient-to-r from-orange-500/20 to-orange-700/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg"></div>
              </div>
              <p class="mt-6 text-orange-600">请使用微信或支付宝扫描上方二维码进行捐款</p>
            </div>

            <!-- 捐款说明 -->
            <div class="bg-white rounded-2xl shadow-lg p-8 transform hover:shadow-xl transition-all duration-300 border border-orange-200">
              <h3 class="text-xl font-bold text-orange-800 mb-6">捐款说明</h3>
              <ul class="space-y-4">
                <li class="flex items-start">
                  <div class="flex-shrink-0 w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center">
                    <svg class="h-6 w-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <h4 class="text-lg font-medium text-orange-900">善款用途</h4>
                    <p class="mt-1 text-orange-600">所有捐款将用于流浪动物的救助、医疗、康复和领养服务</p>
                  </div>
                </li>
                <li class="flex items-start">
                  <div class="flex-shrink-0 w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center">
                    <svg class="h-6 w-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <h4 class="text-lg font-medium text-orange-900">使用公示</h4>
                    <p class="mt-1 text-orange-600">我们会定期在官网公布善款使用明细，确保公开透明</p>
                  </div>
                </li>
                <li class="flex items-start">
                  <div class="flex-shrink-0 w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center">
                    <svg class="h-6 w-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <h4 class="text-lg font-medium text-orange-900">信息保护</h4>
                    <p class="mt-1 text-orange-600">您的个人信息将被严格保密，仅用于开具捐赠收据</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <fonnter />

    <!-- 成功提示 -->
    <transition 
      enter-active-class="transform transition duration-500 ease-out"
      enter-from-class="translate-y-10 opacity-0"
      enter-to-class="translate-y-0 opacity-100"
      leave-active-class="transform transition duration-500 ease-in"
      leave-from-class="translate-y-0 opacity-100"
      leave-to-class="translate-y-10 opacity-0"
    >
      <div 
        v-if="successMessage" 
        class="fixed bottom-8 right-8 bg-orange-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center"
      >
        <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
        {{ successMessage }}
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 表单数据
const name = ref('');
const phone = ref('');
const selectedAmount = ref(null);
const customAmount = ref('');
const message = ref('');
const isSubmitting = ref(false);
const successMessage = ref('');
const formErrors = reactive({
  name: '',
  phone: '',
  amount: ''
});

// 募捐目标数据
const currentAmount = ref(45800);
const targetAmount = ref(100000);

// 预设捐款金额
const donationAmounts = [50, 100, 200];

// 选择金额
const selectAmount = (amount) => {
  selectedAmount.value = amount;
  customAmount.value = '';
  formErrors.amount = '';
};

// 处理自定义金额输入
const onCustomAmountInput = () => {
  selectedAmount.value = null;
  formErrors.amount = '';
};

// 表单验证
const validateForm = () => {
  let isValid = true;
  formErrors.name = '';
  formErrors.phone = '';
  formErrors.amount = '';
  if (!name.value) {
    formErrors.name = '请输入姓名';
    isValid = false;
  }
  if (!phone.value) {
    formErrors.phone = '请输入手机号';
    isValid = false;
  } else if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    formErrors.phone = '请输入正确的手机号';
    isValid = false;
  }
  if (!selectedAmount.value && !customAmount.value) {
    formErrors.amount = '请选择或输入捐款金额';
    isValid = false;
  } else if (customAmount.value && (isNaN(customAmount.value) || Number(customAmount.value) <= 0)) {
    formErrors.amount = '请输入有效的捐款金额';
    isValid = false;
  }
  return isValid;
};

// 提交表单
const submitDonation = async () => {
  if (!validateForm()) return;

  isSubmitting.value = true;
  
  try {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 1500));
    
    // 更新募捐金额
    const donationAmount = selectedAmount.value || Number(customAmount.value);
    currentAmount.value += donationAmount;
    
    // 显示成功消息
    successMessage.value = '感谢您的爱心捐款！';
    
    // 重置表单
    name.value = '';
    phone.value = '';
    selectedAmount.value = null;
    customAmount.value = '';
    message.value = '';
    
    // 3秒后清除成功消息
    setTimeout(() => {
      successMessage.value = '';
    }, 3000);
  } catch (error) {
    successMessage.value = '提交失败，请稍后重试';
  } finally {
    isSubmitting.value = false;
  }
};
</script>

<style scoped lang="less">
.donation-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.donation-content {
  flex: 1;
  padding: 20px 0;
  background: linear-gradient(135deg, #fff9f0 0%, #fef3c7 100%);
}

.us-box {
  width: 100%;
  background-color: #ffedd5;
  display: flex;
  border-bottom: 1px solid rgba(234, 88, 12, 0.3);
}

.animate-fade-in-up {
  animation: fadeInUp 3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.joinleft {
  padding-top: 80px;
  padding-left: 70px;
  width: 60%;
  text-align: left;
  height: 250px;
}

.joinleft>h1 {
  font-family: 'Arial', sans-serif;
  font-size: 50px;
  font-weight: 600;
  color: #7c2d12;
}

.joinleft>p {
  color: #9a3412;
  font-size: 18px;
  margin-top: 15px;
}

.joinright {
  height: 250px;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translatey(0px); }
  50% { transform: translatey(-20px); }
  100% { transform: translatey(0px); }
}

.form-group {
  transition: all 0.3s ease;
}

.form-group:focus-within {
  transform: scale(1.01);
}

input, textarea {
  transition: all 0.3s ease;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #fef3c7;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #ea580c;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #c2410c;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-animate {
  background-size: 200% 200%;
  animation: gradient 3s ease infinite;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .us-box {
    flex-direction: column;
    height: auto;
  }
  
  .joinleft, .joinright {
    width: 100%;
    padding: 40px 20px;
    height: auto;
    text-align: center;
  }
  
  .joinleft>h1 {
    font-size: 36px;
  }
  
  .joinleft>p {
    font-size: 16px;
  }
}
</style>